<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改资料</title>
    <include file="public@head" />

</head>
<body>
<include file="public@nav" />

<div class="center pnWrapper clearfix">
    <include file="public@persnav" />

    <div class="pn_right_wra fr">
        <h3>
            修改资料
        </h3>
        <div class="ic_edit_wra">
            <p class="tips">Hi， <span class="user_name"></span></p>
            <ul class="ic_user_info_wra"></ul>
            <div class="item">
                <span>昵称:</span>
                <input name="user_nickname" class="layui-input user_nickname" type="text" placeholder="请输入新昵称">
            </div>
            <div class="item">
                <span>性别:</span>
                <form action="#" id="sex_wra" class="layui-form">
                    <input type="radio" name="sex" value="1" title="男"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><span>男</span></div>
                    <input type="radio" name="sex" value="2" title="女"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><span>女</span></div>
                </form>
            </div>

            <div class="item">
                <span>年龄:</span>
                <input name="user_age" class="layui-input user_age" type="number" placeholder="请输入年龄">
            </div>
            <div class="item">
                <span>城市:</span>
                <div id="distpicker" class="clearfix">
                    <select id="user_province" class="layui-input"></select>
                    <select id="user_city" class="layui-input"></select>
                    <select id="user_area" class="layui-input"></select>
                </div>
            </div>
        </div>
        <a id="user_card_save" href="javascript:void(0)">保存</a>
    </div>
</div>

<include file="public@footer" />
<include file="public@scripts" />
<script type="text/javascript" src="__TMPL__public/assets/js/personal.js"></script>
<script>
    headerMove(7);
    //省市联动
    var province_wrap = $("#user_province"),
        city_wrap = $("#user_city"),
        area_wrap = $("#user_area");
    function area_change(list){
        console.log(list);
        var province_html='<option value="">请选择</option>',city_html='<option value="">请选择</option>',area_html='<option value="">请选择</option>';
        $.each(list,function(i){
            province_html += '<option visible-index = "'+list[i].index+'" value="'+list[i].code+'">'+list[i].name+'</option>';
        });
        province_wrap.html(province_html);
        province_wrap.on('change',function(){
            var option_choose = $(province_wrap).children("option:selected"),
            index_choose = option_choose.attr('visible-index');
            city_html='<option value="">请选择</option>';
            if(index_choose) {
                $.each(list[index_choose].city,function(k){
                    city_html += '<option  visible-index = "'+list[index_choose].city[k].index+'" value="'+list[index_choose].city[k].code+'">'+list[index_choose].city[k].name+'</option>';
                });
            }
            city_wrap.html(city_html);
            city_wrap.trigger('change');
        });
        city_wrap.on('change',function(){
            var p_choose = $(province_wrap).children("option:selected"),
                    p_index = p_choose.attr('visible-index'),
                    c_choose = $(city_wrap).children("option:selected"),
                    c_index = c_choose.attr('visible-index'),
                    area_html='<option value="">请选择</option>';
            if(c_index) {
                $.each(list[p_index].city[c_index].area,function(k){
                    area_html += '<option value="'+list[p_index].city[c_index].area[k].code+'">'+list[p_index].city[c_index].area[k].name+'</option>';
                });
            }
            area_wrap.html(area_html);
        });
        province_wrap.trigger('change');
    }

    var area_param = {
        url:'Abouts/area'
    };

    $.JsonRpc(area_param,function(data){
//        获取省市区数据，处理成想要结构，添加索引，联动时利用索引找到数据
        var provinceAndCityData = {
            "province":[]
        };
        var list = data.data;
        var city_data = [],area_data=[];
        var p_index = 0;

        var login_cookie = $.cookie("get", {
            name: 'login'
        });
        login_cookie = $.parseJSON(login_cookie);
        var u_nickname = login_cookie.data.u_nickname;
        var u_sex = login_cookie.data.u_sex;
        (u_sex==1)?u_sex="男":u_sex="女";
        var u_age = login_cookie.data.u_age;
        var u_province = login_cookie.data.u_province;
        var u_city = login_cookie.data.u_city;
        var u_region = login_cookie.data.u_region;
        $.each(list,function(i){
            // 用户信息
            if(list[i].level == 1){
                var province_data = {
                    name:list[i].name,
                    code:list[i].code,
                    city:[],
                    index:p_index++
                };
                provinceAndCityData.province.push(province_data);

                if(list[i].code==u_province){
                    u_province = list[i].name;
                }
            }else if(list[i].level == 2){
                city_data.push({
                    name:list[i].name,
                    code:list[i].code,
                    parent_id:list[i].parent_id,
                    area:[]
                });
                if(list[i].code==u_city){
                    u_city = list[i].name;
                }
            }else if(list[i].level == 3){
                area_data.push({
                    name:list[i].name,
                    code:list[i].code,
                    parent_id:list[i].parent_id
                });
                if(list[i].code==u_region){
                    u_region = list[i].name;
                }
            }
        });
        var user_info_html =
                '<li>'+
                '<span>昵称：</span>'+
                '<span>'+u_nickname+'</span>'+
                '</li>'+
                '<li>'+
                '<span>性别：</span>'+
                '<span>'+u_sex+'</span>'+
                '</li>'+
                '<li>'+
                '<span>年龄：</span>'+
                '<span>'+u_age+'</span>'+
                '</li>'+
                '<li>'+
                '<span>城市：</span>'+
                '<span>'+u_province+"—"+u_city+"—"+u_region+'</span>'+
                '</li>';

        $(".ic_user_info_wra").html(user_info_html);
        $.each(provinceAndCityData.province,function(i){
            var c_index = 0;
            $.each(city_data,function(k){
                if(city_data[k].parent_id == provinceAndCityData.province[i].code){
                    city_data[k].index = c_index++;
                    provinceAndCityData.province[i].city.push(city_data[k]);
                }
            })
        });
        $.each(provinceAndCityData.province,function(i){
            $.each(provinceAndCityData.province[i].city,function(k){
                $.each(area_data,function(j){
                    if(area_data[j].parent_id == provinceAndCityData.province[i].city[k].code){
                        provinceAndCityData.province[i].city[k].area.push(area_data[j]);
                    }
                })
            });
        });
        area_change(provinceAndCityData.province);
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var start = {
            min: '1800-01-01 23:59:59'
            ,max: laydate.now()
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
            }
        };
        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        $("#lay_birthday").on("click",function(){
            start.elem = this;
            laydate(start);
        });
    });
    layui.use('form', function(){
        var form = layui.form(); //只有执行了这一步，部分表单元素才会修饰成功
    });



    //修改信息
    $("#user_card_save").on("click",function(){
        var focus_param = {
            url:'Users/edit',
            data:{

            }
        };
        var user_nickname_val = $(".user_nickname").val();
        if(user_nickname_val&&user_nickname_val!=""){
            focus_param.data.nickname = user_nickname_val;
        }
        var sex_val = $("input[name=sex]:checked").val();
        if(sex_val&&sex_val!="undefined"){
            focus_param.data.sex = sex_val;
        }
        var age_val = $("input[name=user_age]").val();
        if(age_val!=""){
            focus_param.data.age = age_val;
        }
        var user_province_val = $("#user_province :selected").val();
        var user_city_val = $("#user_city :selected").val();
        var user_area_val = $("#user_area :selected").val();

        if(user_province_val&&user_city_val&&user_area_val){
            focus_param.data.province = user_province_val;
            focus_param.data.city = user_city_val;
            focus_param.data.region = user_area_val;
        }

        $.JsonRpc(focus_param,function(data){
            if(data.code==200){
                var login_cookie = $.cookie("get", {
                    name: 'login'
                });
                login_cookie = $.parseJSON(login_cookie);

                if(focus_param.data.nickname){
                    login_cookie.data.u_nickname = focus_param.data.nickname;
                    localStorage.u_nickname = focus_param.data.nickname;
                }
                if(focus_param.data.sex){
                    login_cookie.data.u_sex = focus_param.data.sex;
                    localStorage.u_sex = focus_param.data.sex;
                }
                if(focus_param.data.age){
                    login_cookie.data.u_age = focus_param.data.age;
                    localStorage.u_age = focus_param.data.age;
                }
                if(focus_param.data.province&&focus_param.data.city&&focus_param.data.region){
                    login_cookie.data.u_province = focus_param.data.province;
                    login_cookie.data.u_city = focus_param.data.city;
                    login_cookie.data.u_region = focus_param.data.region;
                }
                login_cookie = JSON.stringify(login_cookie);
                $.cookie("set", {
                    duration: 365,
                    name: 'login',
                    value: login_cookie
                });
                //login_cookie.data.u_nickname
                location.reload();
            }
        });
    });

</script>
</body>
</html>